<template>
  <ul class="my-product">
    <li v-for="(item, index) in arr" :key="index">
      <span>{{ item.proname }}</span>
      <span>{{ item.proprice }}</span>
    </li>
  </ul>
</template>

<script>
//引入空白对象(EventBus)
import eventBus from '../EventBus/index' 

export default {
  //显示相同的商品数据 
  // 接收传递过来的数据 
  props: ["arr"],

  // 组件创建完毕时,监听send事件
  // 生命周期方法created() 这个方法会在List.vue组件创建时自动执行created()
  created(){
    //在空白对象上 用on监听一个事件
    eventBus.$on('send',(index,price)=>{
      // 在数组中找到当前索引的数据 让原价格减去price

      console.log(index, price);
      this.arr[index].proprice - price
    })
  }
};
</script>

<style>
.my-product {
  width: 400px;
  padding: 20px;
  border: 2px solid #000;
  border-radius: 5px;
  margin: 10px;
}
</style>